<template>
	<div class="system-dept-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="csrDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<div class="personal-edit-title">基本信息</div>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="手机号码">
							<el-input v-model="state.showProductRecordData.phone" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="业务省份">
							<el-input :value="state.showProductRecordData.province + ' ' + state.showProductRecordData.city"
								disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="业务名称">
							<el-input v-model="state.showProductRecordData.businessName" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="订购时间">
							<el-input :value="state.showProductRecordData.createTime" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="产品名称">
							<el-input v-model="state.showProductRecordData.productName" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="渠道名称">
							<el-input :value="state.showProductRecordData.channelName" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否扣除">
							<el-switch :value="state.showProductRecordData.isDeduction == 1" inline-prompt active-text="是"
								active-color="#FA8072" inactive-text="否" disabled></el-switch>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="包月费用">
							<el-input :value="Math.round(state.showProductRecordData.informationFee / 100).toFixed(2)"
								disabled class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="订单状态">
							<el-input :value="getOrderStatusText(state.telecomUserPackageData.status)" disabled />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="功能费用">
							<el-input :value="state.telecomUserPackageData.order_amount" disabled class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="功能时间">
							<el-input :value="state.telecomUserPackageData.order_time" disabled class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="情况说明">
							<el-input v-model="state.ruleForm.description" type="textarea" placeholder="请输入客户情况说明"
								maxlength="1500" :autosize="{ minRows: 5}" show-word-limit='true'></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<div class="personal-edit-title">退费操作</div>
					</el-col>
					<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="处理方式">
							<el-select v-model="state.ruleForm.processingResults" placeholder="请选择" size="default">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="退费金额">
							<el-input-number v-model="state.ruleForm.rechargeAmount" :min="0" :max="9999"
								controls-position="right" placeholder="请输入退费金额" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="实际金额">
							<el-input-number v-model="state.ruleForm.actualAmount" :min="0" :max="9999"
								controls-position="right" placeholder="请输入实际金额" class="w100" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
					<el-button type="warning"
						@click="unsubscribeMonthly(state.showProductRecordData.phone, state.showProductRecordData.code)"
						size="default" v-show="state.showProductRecordData.businessId == '89986457190584325'">退订</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="CsrDialog">
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';

import apiCs from '/@/api/cs/index';
import apiProductOrder from '/@/api/order/productOrder/index';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const csrDialogFormRef = ref();
const state = reactive({
	ruleForm: {
		id: '',
		rechargeAmount: 0, // 应退费金额
		actualAmount: 0, // 实际退费金额
		description: '', // 客户情况说明
		processingResults: 0, // 登记处理情况类型
		processingTime: '', // 登记处理时间
	},
	showProductRecordData: [] as RowSysPoType,
	telecomUserPackageDataList: [] as telecomUserPackageType[],
	telecomUserPackageData: {} as telecomUserPackageType,
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});
const options = [
	{
		value: 1,
		label: '退订业务',
	},
	{
		value: 2,
		label: '退订业务+退费',
	},
	{
		value: 3,
		label: '由运营商通知处理的客服操作',
	},
	{
		value: 0,
		label: '未登记',
	}
]

// 查询渠道产品客户服务记录
const queryByIdProductRecord = () => {
	// 电信视频彩铃才查询
	if (state.showProductRecordData.businessId == "89986457190584325") {
		queryTelecomUserPackageInfo(state.showProductRecordData.phone, state.showProductRecordData.code);
	}

};

// 查询电信视频彩铃用户包月信息
const queryTelecomUserPackageInfo = (phone: string, channelCode: string) => {
	apiCs().queryTelecomUserPackageInfo({ phone: phone, t: channelCode })
		.then(res => {
			if (res.data.resCode != '0000') {
				ElMessage.error(res.data.result.message);
			}
			if (res.data.result.code == '0000') {
				state.telecomUserPackageDataList = res.data.result.data
				state.telecomUserPackageData.order_amount = 0.0;
				// 遍历数组
				state.telecomUserPackageDataList.forEach(x => {
					switch (x.package_id) {
						case "7360110000100433":
							state.telecomUserPackageData.order_time = x.order_time;
							state.telecomUserPackageData.order_amount = 3.0;
							break;
						case "7360110000100254":
							state.telecomUserPackageData.order_time = x.order_time;
							state.telecomUserPackageData.order_amount = 6.0;
							break;
						case state.showProductRecordData.icmpCode:
							state.telecomUserPackageData.status = x.status;
							break;
					}

				});
			}
		})
		.catch(err => { });
};

// 打开弹窗
const openDialog = (type: string, row: RowSysCSType, productRecord: any) => {
	state.telecomUserPackageData.package_id = "-1";
	state.telecomUserPackageData.order_amount = 0;
	state.telecomUserPackageData.order_time = "";
	state.telecomUserPackageData.status = -1;

	if (type === 'edit') {
		state.ruleForm = row;
		state.dialog.title = '登记处理';
		state.dialog.submitTxt = '登 记';
	}
	state.showProductRecordData = productRecord;
	state.dialog.isShowDialog = true;
	// 查询渠道产品客户服务记录
	queryByIdProductRecord();
};

// 电信视频彩铃包月产品退订
const unsubscribeMonthly = (phone: string, channelCode: string) => {

	apiCs().unsubscribeMonthly({ phone: phone, t: channelCode })
		.then(res => {
			if (res.data.resCode != '0000') {
				ElMessage.error(res.data.resMessage);
			}
			if (res.data.result.basicJTResponse.res_code === "0") {
				ElMessage.error("退订成功");
			}
		})
		.catch(err => { });
};

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	emit('refresh');
	closeDialog();
};
// 提交
const onSubmit = () => {
	apiCs().editCustomerServiceRecord(state.ruleForm).then(res => {
		if (res.data.resCode != '0000') {
			ElMessage.error(res.data.resMessage);
		} else {
			ElMessage.success(res.data.resMessage);
			emit('refresh');
			closeDialog();
		}
	})
		.catch(err => { });
};

// 获取处理结果文字
const getOrderStatusText = (orderStatus: number) => {
	switch (orderStatus) {
		case 0:
			return '正常开通';
		case 2:
			return '退订';
		default:
			return '未知';
	}
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.personal-edit-title {
	position: relative;
	padding-left: 10px;
	color: var(--el-text-color-regular);

	&::after {
		content: '';
		width: 2px;
		height: 10px;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		background: var(--el-color-primary);
	}
}
</style>
